<template>
  <div class="admin-tasks">
    <!-- 小猫动画装饰 - 移到顶部 -->
    <div class="cat-animation-container">
      <div class="working-cat">
        <div class="cat-laptop">
          <div class="laptop-screen">
            <div class="code-line"></div>
            <div class="code-line"></div>
            <div class="code-line"></div>
          </div>
          <div class="laptop-keyboard"></div>
        </div>
        <div class="cat">
          <div class="cat-head">
            <div class="cat-ear left"></div>
            <div class="cat-ear right"></div>
            <div class="cat-face">
              <div class="cat-eyes">
                <div class="cat-eye"></div>
                <div class="cat-eye"></div>
              </div>
            </div>
          </div>
          <div class="cat-body"></div>
          <div class="cat-arms">
            <div class="cat-arm left"></div>
            <div class="cat-arm right"></div>
          </div>
          <div class="cat-tail"></div>
        </div>
      </div>
      <div class="chat-bubble">
        <div class="bubble-text">欢迎来到任务管理页面 - 正在帮您管理任务...</div>
      </div>
      <div class="task-note">
        <div class="note-content">
          <div class="note-title">今日任务</div>
          <div class="note-line"></div>
          <div class="note-line"></div>
          <div class="note-line"></div>
        </div>
      </div>
    </div>
    
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索任务名称、类型..." 
          class="admin-form-input search-input"
          @input="handleSearch"
        >
        <button class="search-btn">
          🔍
        </button>
      </div>
      
      <div class="filter-options">
        <select v-model="statusFilter" class="admin-form-input filter-select" @change="handleFilter">
          <option value="">全部状态</option>
          <option value="active">进行中</option>
          <option value="completed">已完成</option>
          <option value="upcoming">即将开始</option>
          <option value="expired">已过期</option>
        </select>
        
        <select v-model="challengeFilter" class="admin-form-input filter-select" @change="handleFilter">
          <option value="">全部挑战</option>
          <option value="1">低碳生活挑战</option>
          <option value="2">节能减排计划</option>
          <option value="3">垃圾分类达人</option>
        </select>
      </div>
      
      <div class="action-buttons">
        <router-link to="/admin/tasks/new" class="admin-btn admin-btn-primary">
          新建任务
        </router-link>
        <button class="admin-btn" @click="exportData">导出数据</button>
      </div>
    </div>
    
    <!-- 任务列表 -->
    <div class="tasks-table-container">
      <table class="admin-table">
        <thead>
          <tr>
            <th style="width: 50px;">ID</th>
            <th>任务名称</th>
            <th style="width: 120px;">所属挑战</th>
            <th style="width: 100px;">完成类型</th>
            <th style="width: 100px;">积分奖励</th>
            <th style="width: 120px;">开始时间</th>
            <th style="width: 120px;">结束时间</th>
            <th style="width: 80px;">状态</th>
            <th style="width: 80px;">完成率</th>
            <th style="width: 150px;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="task in filteredTasks" :key="task.id">
            <td>{{ task.id }}</td>
            <td>{{ task.title }}</td>
            <td>{{ getChallengeText(task.challengeId) }}</td>
            <td>{{ getTaskTypeText(task.taskType) }}</td>
            <td>{{ task.points }}</td>
            <td>{{ formatDate(task.startTime) }}</td>
            <td>{{ formatDate(task.endTime) }}</td>
            <td>
              <span :class="['status-tag', 'status-' + task.status]">
                {{ getStatusText(task.status) }}
              </span>
            </td>
            <td>
              <div class="progress-bar">
                <div class="progress-inner" :style="{ width: task.completionRate + '%' }"></div>
              </div>
              <div class="progress-text">{{ task.completionRate }}%</div>
            </td>
            <td class="actions-cell">
              <div class="actions-wrapper">
                <router-link :to="`/admin/tasks/${task.id}`" class="action-btn edit-btn">
                  编辑
                </router-link>
                <button 
                  class="action-btn view-btn" 
                  @click="viewSubmissions(task)"
                >
                  查看提交
                </button>
                <button 
                  class="action-btn delete-btn" 
                  @click="showDeleteConfirm(task)"
                >
                  删除
                </button>
              </div>
            </td>
          </tr>
          <tr v-if="filteredTasks.length === 0">
            <td colspan="10" class="empty-message">
              <div class="empty-content">
                <div class="empty-icon">📝</div>
                <div class="empty-text">
                  {{ searchQuery || statusFilter || challengeFilter ? '没有找到匹配的任务' : '暂无任务数据' }}
                </div>
                <div class="empty-action" v-if="searchQuery || statusFilter || challengeFilter">
                  <button class="admin-btn" @click="resetFilters">重置筛选</button>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- 分页器 -->
    <div class="pagination">
      <div class="pagination-info">
        共 {{ totalItems }} 项，每页 {{ pageSize }} 项，当前第 {{ currentPage }} 页
      </div>
      <div class="pagination-buttons">
        <button 
          :disabled="currentPage === 1" 
          @click="changePage(currentPage - 1)"
          class="pagination-btn"
        >
          上一页
        </button>
        <button 
          v-for="page in displayedPages" 
          :key="page" 
          :class="['pagination-btn', page === currentPage ? 'active' : '']"
          @click="changePage(page)"
        >
          {{ page }}
        </button>
        <button 
          :disabled="currentPage === totalPages" 
          @click="changePage(currentPage + 1)"
          class="pagination-btn"
        >
          下一页
        </button>
      </div>
    </div>
    
    <!-- 任务提交对话框 -->
    <div class="modal-overlay" v-if="showSubmissionsModal">
      <div class="modal-container submissions-modal">
        <div class="modal-header">
          <h3>任务提交记录</h3>
          <button class="close-btn" @click="closeSubmissionsModal">×</button>
        </div>
        <div class="modal-body">
          <div class="task-info">
            <h2 class="task-title">{{ selectedTask.title }}</h2>
            <div class="task-meta">
              <div class="meta-item">
                <span class="meta-label">所属挑战:</span>
                <span class="meta-value">{{ getChallengeText(selectedTask.challengeId) }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">积分奖励:</span>
                <span class="meta-value">{{ selectedTask.points }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">完成类型:</span>
                <span class="meta-value">{{ getTaskTypeText(selectedTask.taskType) }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">时间范围:</span>
                <span class="meta-value">{{ formatDate(selectedTask.startTime) }} 至 {{ formatDate(selectedTask.endTime) }}</span>
              </div>
            </div>
          </div>
          
          <div class="submissions-filter">
            <div class="filter-group">
              <label>提交状态:</label>
              <select v-model="submissionStatusFilter" class="admin-form-input filter-select">
                <option value="">全部状态</option>
                <option value="pending">待审核</option>
                <option value="approved">已通过</option>
                <option value="rejected">已拒绝</option>
              </select>
            </div>
            
            <div class="filter-group">
              <label>排序方式:</label>
              <select v-model="submissionSortBy" class="admin-form-input filter-select">
                <option value="time_desc">提交时间 (最新)</option>
                <option value="time_asc">提交时间 (最早)</option>
              </select>
            </div>
          </div>
          
          <div class="submissions-list">
            <div v-if="filteredSubmissions.length === 0" class="empty-submissions">
              <div class="empty-icon">📋</div>
              <div class="empty-text">暂无提交记录</div>
            </div>
            
            <div v-else>
              <div 
                v-for="(submission, index) in filteredSubmissions" 
                :key="index"
                class="submission-item"
              >
                <div class="submission-header">
                  <div class="submission-user">
                    <div class="user-avatar">
                      <div class="avatar-placeholder">{{ getUserInitials(submission.userName) }}</div>
                    </div>
                    <div class="user-info">
                      <div class="user-name">{{ submission.userName }}</div>
                      <div class="submission-time">{{ formatDateTime(submission.submitTime) }}</div>
                    </div>
                  </div>
                  
                  <div :class="['submission-status', 'status-' + submission.status]">
                    {{ getSubmissionStatusText(submission.status) }}
                  </div>
                </div>
                
                <div class="submission-content">
                  <div v-if="submission.text" class="submission-text">
                    {{ submission.text }}
                  </div>
                  
                  <div v-if="submission.images && submission.images.length > 0" class="submission-images">
                    <div 
                      v-for="(image, imageIndex) in submission.images" 
                      :key="imageIndex"
                      class="image-item"
                    >
                      <img :src="image" alt="提交图片">
                    </div>
                  </div>
                </div>
                
                <div class="submission-actions" v-if="submission.status === 'pending'">
                  <button 
                    class="admin-btn admin-btn-success" 
                    @click="approveSubmission(submission)"
                  >
                    通过
                  </button>
                  <button 
                    class="admin-btn admin-btn-danger" 
                    @click="rejectSubmission(submission)"
                  >
                    拒绝
                  </button>
                </div>
                
                <div class="submission-comment" v-if="submission.comment">
                  <div class="comment-label">审核备注:</div>
                  <div class="comment-content">{{ submission.comment }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="admin-btn" @click="closeSubmissionsModal">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 删除确认对话框 -->
    <div class="modal-overlay" v-if="showDeleteModal">
      <div class="modal-container">
        <div class="modal-header">
          <h3>确认删除</h3>
        </div>
        <div class="modal-body">
          <p>您确定要删除任务 <strong>{{ selectedTask.title }}</strong> 吗？</p>
          <p class="warning-text">此操作不可逆，删除后数据将无法恢复。</p>
        </div>
        <div class="modal-footer">
          <button class="admin-btn" @click="cancelDelete">取消</button>
          <button class="admin-btn admin-btn-danger" @click="confirmDelete">确认删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminTasks',
  data() {
    return {
      tasks: [
        {
          id: 1,
          title: '每日骑自行车上班',
          challengeId: 1,
          taskType: 'daily',
          points: 30,
          startTime: '2023-01-15',
          endTime: '2023-01-22',
          status: 'completed',
          completionRate: 85,
          submissions: [
            {
              id: 101,
              userId: 1,
              userName: '张三',
              submitTime: '2023-01-16 09:15:30',
              text: '今天骑自行车上班，感觉很好，减少了碳排放。',
              images: ['/path/to/image1.jpg'],
              status: 'approved',
              comment: '做得不错，继续保持！'
            },
            {
              id: 102,
              userId: 2,
              userName: '李四',
              submitTime: '2023-01-16 08:30:45',
              text: '第一次尝试骑车上班，距离有点远但很有成就感。',
              images: ['/path/to/image2.jpg', '/path/to/image3.jpg'],
              status: 'approved',
              comment: ''
            },
            {
              id: 103,
              userId: 3,
              userName: '王五',
              submitTime: '2023-01-16 18:45:22',
              text: '提交我的骑行记录，今天骑行了5公里。',
              images: ['/path/to/image4.jpg'],
              status: 'pending',
              comment: ''
            }
          ]
        },
        {
          id: 2,
          title: '无纸化办公一天',
          challengeId: 1,
          taskType: 'daily',
          points: 20,
          startTime: '2023-01-16',
          endTime: '2023-01-17',
          status: 'active',
          completionRate: 45,
          submissions: []
        },
        {
          id: 3,
          title: '更换节能灯泡',
          challengeId: 2,
          taskType: 'one_time',
          points: 50,
          startTime: '2023-02-01',
          endTime: '2023-02-28',
          status: 'active',
          completionRate: 30,
          submissions: []
        },
        {
          id: 4,
          title: '垃圾分类打卡',
          challengeId: 3,
          taskType: 'daily',
          points: 15,
          startTime: '2023-03-10',
          endTime: '2023-03-31',
          status: 'upcoming',
          completionRate: 0,
          submissions: []
        },
        {
          id: 5,
          title: '记录用水量',
          challengeId: 2,
          taskType: 'weekly',
          points: 40,
          startTime: '2023-01-01',
          endTime: '2023-01-31',
          status: 'expired',
          completionRate: 65,
          submissions: []
        },
        {
          id: 6,
          title: '减少一次性餐具使用',
          challengeId: 1,
          taskType: 'daily',
          points: 25,
          startTime: '2023-04-01',
          endTime: '2023-04-30',
          status: 'active',
          completionRate: 78,
          submissions: []
        },
        {
          id: 7,
          title: '电子账单转换',
          challengeId: 2,
          taskType: 'one_time',
          points: 35,
          startTime: '2023-03-15',
          endTime: '2023-04-15',
          status: 'active',
          completionRate: 60,
          submissions: []
        },
        {
          id: 8,
          title: '低碳饮食一周',
          challengeId: 1,
          taskType: 'weekly',
          points: 45,
          startTime: '2023-04-10',
          endTime: '2023-04-17',
          status: 'active',
          completionRate: 40,
          submissions: []
        },
        {
          id: 9,
          title: '社区植树活动',
          challengeId: 3,
          taskType: 'one_time',
          points: 100,
          startTime: '2023-05-01',
          endTime: '2023-05-01',
          status: 'upcoming',
          completionRate: 0,
          submissions: []
        },
        {
          id: 10,
          title: '旧物回收利用',
          challengeId: 3,
          taskType: 'monthly',
          points: 60,
          startTime: '2023-04-01',
          endTime: '2023-04-30',
          status: 'active',
          completionRate: 25,
          submissions: []
        }
      ],
      searchQuery: '',
      statusFilter: '',
      challengeFilter: '',
      currentPage: 1,
      pageSize: 10,
      showSubmissionsModal: false,
      showDeleteModal: false,
      selectedTask: {},
      submissionStatusFilter: '',
      submissionSortBy: 'time_desc'
    }
  },
  computed: {
    filteredTasks() {
      let result = [...this.tasks]
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(task => 
          task.title.toLowerCase().includes(query) || 
          this.getTaskTypeText(task.taskType).toLowerCase().includes(query) ||
          this.getChallengeText(task.challengeId).toLowerCase().includes(query)
        )
      }
      
      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(task => task.status === this.statusFilter)
      }
      
      // 挑战过滤
      if (this.challengeFilter) {
        result = result.filter(task => task.challengeId === parseInt(this.challengeFilter))
      }
      
      // 分页
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      
      return result.slice(startIndex, endIndex)
    },
    totalItems() {
      return this.tasks.length
    },
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize)
    },
    displayedPages() {
      const pages = []
      const maxVisiblePages = 5
      
      let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2))
      let endPage = startPage + maxVisiblePages - 1
      
      if (endPage > this.totalPages) {
        endPage = this.totalPages
        startPage = Math.max(1, endPage - maxVisiblePages + 1)
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i)
      }
      
      return pages
    },
    filteredSubmissions() {
      if (!this.selectedTask.submissions) return []
      
      let result = [...this.selectedTask.submissions]
      
      // 状态过滤
      if (this.submissionStatusFilter) {
        result = result.filter(submission => submission.status === this.submissionStatusFilter)
      }
      
      // 排序
      if (this.submissionSortBy === 'time_desc') {
        result.sort((a, b) => new Date(b.submitTime) - new Date(a.submitTime))
      } else if (this.submissionSortBy === 'time_asc') {
        result.sort((a, b) => new Date(a.submitTime) - new Date(b.submitTime))
      }
      
      return result
    }
  },
  methods: {
    getChallengeText(challengeId) {
      const challengeMap = {
        1: '低碳生活挑战',
        2: '节能减排计划',
        3: '垃圾分类达人'
      }
      return challengeMap[challengeId] || '未知挑战'
    },
    getTaskTypeText(taskType) {
      const typeMap = {
        'daily': '每日任务',
        'weekly': '每周任务',
        'one_time': '一次性'
      }
      return typeMap[taskType] || '未知类型'
    },
    getStatusText(status) {
      const statusMap = {
        'active': '进行中',
        'completed': '已完成',
        'upcoming': '即将开始',
        'expired': '已过期'
      }
      return statusMap[status] || '未知'
    },
    getSubmissionStatusText(status) {
      const statusMap = {
        'pending': '待审核',
        'approved': '已通过',
        'rejected': '已拒绝'
      }
      return statusMap[status] || '未知'
    },
    formatDate(dateString) {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    formatDateTime(dateTimeString) {
      if (!dateTimeString) return '未知'
      return dateTimeString
    },
    getUserInitials(username) {
      if (!username) return '?'
      return username.charAt(0).toUpperCase()
    },
    handleSearch() {
      this.currentPage = 1
    },
    handleFilter() {
      this.currentPage = 1
    },
    resetFilters() {
      this.searchQuery = ''
      this.statusFilter = ''
      this.challengeFilter = ''
      this.currentPage = 1
    },
    changePage(page) {
      this.currentPage = page
    },
    exportData() {
      // 实际应用中会调用导出API
      alert('导出数据功能将在实际应用中实现')
    },
    viewSubmissions(task) {
      this.selectedTask = task
      this.showSubmissionsModal = true
      this.submissionStatusFilter = ''
      this.submissionSortBy = 'time_desc'
    },
    closeSubmissionsModal() {
      this.showSubmissionsModal = false
      this.selectedTask = {}
    },
    approveSubmission(submission) {
      if (confirm(`确定通过用户 ${submission.userName} 的提交吗？`)) {
        const comment = prompt('请输入审核备注（可选）:')
        submission.status = 'approved'
        if (comment) {
          submission.comment = comment
        }
        alert('已通过提交')
      }
    },
    rejectSubmission(submission) {
      if (confirm(`确定拒绝用户 ${submission.userName} 的提交吗？`)) {
        const comment = prompt('请输入拒绝原因:')
        if (comment) {
          submission.status = 'rejected'
          submission.comment = comment
          alert('已拒绝提交')
        } else {
          alert('拒绝提交需要填写拒绝原因')
        }
      }
    },
    showDeleteConfirm(task) {
      this.selectedTask = task
      this.showDeleteModal = true
    },
    cancelDelete() {
      this.showDeleteModal = false
      this.selectedTask = {}
    },
    confirmDelete() {
      // 实际应用中会调用删除API
      alert(`将删除ID为${this.selectedTask.id}的任务: ${this.selectedTask.title}`)
      
      // 模拟删除
      const index = this.tasks.findIndex(t => t.id === this.selectedTask.id)
      if (index !== -1) {
        this.tasks.splice(index, 1)
      }
      
      this.showDeleteModal = false
      this.selectedTask = {}
    }
  }
}
</script>

<style scoped>
.admin-tasks {
  width: 100%;
  padding: 0;
}

.cat-animation-container {
  margin: 0;
  padding: 24px;
  background-color: #f5f9ff;
  border-radius: 0;
  position: relative;
  height: 200px;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}

/* 工具栏样式 */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.search-box {
  position: relative;
  min-width: 250px;
}

.search-input {
  padding-right: 40px;
}

.search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.filter-options {
  display: flex;
  gap: 16px;
}

.filter-select {
  min-width: 120px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

/* 任务列表样式 */
.tasks-table-container {
  padding: 0 24px 24px 24px;
  overflow-x: auto;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background-color: #f5f5f5;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-inner {
  height: 100%;
  background-color: #1890ff;
  border-radius: 3px;
}

.progress-text {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.status-active {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.status-completed {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-upcoming {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.status-expired {
  background-color: #f5f5f5;
  color: #666666;
  border: 1px solid #d9d9d9;
}

.actions-cell {
  text-align: center;
}

.actions-wrapper {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.action-btn {
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.edit-btn {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.view-btn {
  background-color: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.delete-btn {
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffa39e;
}

.empty-message {
  padding: 40px 0;
  text-align: center;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-icon {
  font-size: 32px;
  color: #d9d9d9;
}

.empty-text {
  color: rgba(0, 0, 0, 0.45);
}

/* 分页器样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-info {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.pagination-buttons {
  display: flex;
  gap: 8px;
}

.pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  background-color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  color: #1890ff;
  border-color: #1890ff;
}

.pagination-btn.active {
  color: white;
  background-color: #1890ff;
  border-color: #1890ff;
}

.pagination-btn:disabled {
  color: rgba(0, 0, 0, 0.25);
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 400px;
  animation: modalFadeIn 0.3s;
}

.submissions-modal {
  width: 700px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.warning-text {
  color: #ff4d4f;
  font-size: 14px;
}

/* 任务提交记录样式 */
.task-info {
  margin-bottom: 24px;
}

.task-title {
  margin: 0 0 12px 0;
  font-size: 20px;
}

.task-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  color: rgba(0, 0, 0, 0.45);
  margin-right: 8px;
}

.submissions-filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.empty-submissions {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  color: rgba(0, 0, 0, 0.45);
}

.empty-submissions .empty-icon {
  font-size: 36px;
  margin-bottom: 16px;
}

.submissions-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.submission-item {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.submission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.submission-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-placeholder {
  width: 32px;
  height: 32px;
  background-color: #1890ff;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-name {
  font-weight: 500;
}

.submission-time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.submission-status {
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.status-pending {
  background-color: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.status-approved {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-rejected {
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffa39e;
}

.submission-content {
  padding: 16px;
}

.submission-text {
  margin-bottom: 16px;
  white-space: pre-line;
}

.submission-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.image-item {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f0f0f0;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.submission-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}

.submission-comment {
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-top: 1px solid #f0f0f0;
}

.comment-label {
  font-weight: 500;
  margin-bottom: 4px;
}

.comment-content {
  color: rgba(0, 0, 0, 0.65);
  white-space: pre-line;
}

/* 猫咪动画区域 */
.cat-playground {
  position: relative;
  height: 200px;
  margin: 20px 0;
  background-color: rgba(245, 255, 245, 0.5);
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
  overflow: hidden;
}

.working-cat {
  position: absolute;
  bottom: 30px;
  left: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cat {
  position: relative;
  width: 100px;
  height: 80px;
  z-index: 2;
}

.cat-head {
  position: absolute;
  width: 45px;
  height: 45px;
  background-color: #b18e6e;
  border-radius: 50%;
  top: -25px;
  left: 30px;
  z-index: 3;
}

.cat-ear {
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 15px solid #b18e6e;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: -10px;
}

.cat-ear.left {
  left: -5px;
  transform: rotate(-30deg);
}

.cat-ear.right {
  right: -5px;
  transform: rotate(30deg);
}

.cat-face {
  position: relative;
  padding-top: 18px;
}

.cat-eyes {
  display: flex;
  justify-content: space-evenly;
}

.cat-eye {
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
  animation: cat-blink 4s infinite;
}

@keyframes cat-blink {
  0%, 95%, 100% { height: 8px; border-radius: 50%; }
  97%, 98% { height: 1px; border-radius: 50%; }
}

.cat-body {
  position: absolute;
  width: 60px;
  height: 40px;
  background-color: #b18e6e;
  border-radius: 30px / 20px;
  top: 15px;
  left: 20px;
}

.cat-arms {
  position: absolute;
  top: 25px;
  width: 100%;
}

.cat-arm {
  position: absolute;
  width: 35px;
  height: 10px;
  background-color: #b18e6e;
  border-radius: 5px;
}

.cat-arm.left {
  left: 5px;
  transform: rotate(20deg);
  animation: type-left 1s infinite;
}

.cat-arm.right {
  right: 5px;
  transform: rotate(-20deg);
  animation: type-right 1s infinite;
}

@keyframes type-left {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(25deg) translateY(-2px); }
}

@keyframes type-right {
  0%, 100% { transform: rotate(-20deg); }
  50% { transform: rotate(-25deg) translateY(-2px); }
}

.cat-tail {
  position: absolute;
  width: 40px;
  height: 10px;
  background-color: #b18e6e;
  border-radius: 5px;
  right: -15px;
  top: 30px;
  transform-origin: left center;
  animation: tail-wag 3s infinite ease-in-out;
}

@keyframes tail-wag {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
}

.cat-laptop {
  position: relative;
  width: 120px;
  height: 80px;
  z-index: 1;
}

.laptop-screen {
  position: absolute;
  width: 100px;
  height: 65px;
  background-color: #f0f0f0;
  border: 5px solid #333;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  transform: perspective(300px) rotateX(10deg);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.code-line {
  height: 3px;
  margin: 8px;
  background-color: #3498db;
  animation: typing 1.5s infinite;
  opacity: 0.7;
}

.code-line:nth-child(2) {
  width: 60%;
  animation-delay: 0.5s;
}

.code-line:nth-child(3) {
  width: 40%;
  animation-delay: 1s;
}

@keyframes typing {
  0% { width: 20%; }
  50% { width: 80%; }
  100% { width: 20%; }
}

.laptop-keyboard {
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 10px;
  background-color: #333;
  border-radius: 0 0 5px 5px;
}

.chat-bubble {
  position: absolute;
  top: 20px;
  left: 200px;
  background-color: white;
  padding: 10px 15px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  max-width: 200px;
}

.chat-bubble:before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-top: 10px solid white;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.bubble-text {
  font-size: 14px;
  color: #444;
}

.task-note {
  position: absolute;
  right: 100px;
  top: 40px;
  width: 120px;
  height: 150px;
  background-color: #ffffa5;
  transform: rotate(5deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  padding: 10px;
}

.note-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-title {
  text-align: center;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
  font-size: 14px;
}

.note-line {
  height: 2px;
  background-color: #d4c066;
  margin: 5px 0;
  opacity: 0.7;
}

.note-line:nth-child(2) {
  width: 90%;
}

.note-line:nth-child(3) {
  width: 75%;
}

.note-line:nth-child(4) {
  width: 80%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cat-playground {
    height: 250px;
  }
  
  .working-cat {
    left: 50px;
  }
  
  .chat-bubble {
    left: 50px;
    top: 120px;
  }
  
  .task-note {
    right: 30px;
  }
}
</style> 